<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-text="content"></div>
    <div v-html="content"></div>
    <div>
        <font v-bind={color:color1}>hello</font>
        <font v-bind:color="color1">hello</font>
        <font :color="color2">pig</font>
        <a v-bind:href="url1">百度一下</a>
        <a v-bind={href:"https://www.baidu.com?id="+id}>百度一下</a>
        <a v-bind={href:url3+id}>百度一下</a>
    </div>
    <img :src="url2" style="width: 250px">
    <h3>v-model</h3>
    username:<input type="text" v-model="user.username">
    <br>
    address:<input type="text" v-model="user.address">
    <br>
    {{user.username}}:{{user.address}}

    <div>
        <input type="checkbox" value="java" v-model="language">java<br>
        <input type="checkbox" value="python" v-model="language">python<br>
        <input type="checkbox" value="swift" v-model="language">swift<br>
        <h3>
            your select:{{language.join(", ")}}
        </h3>
    </div>
    <ul>
        <li v-for="(item,index) in list">{{index+1}}:{{item}}</li>
    </ul>
    <ul>
        <li v-for="(myValue,myKey) in user">{{myKey}}:{{myValue}}</li>
    </ul>
    <table border="1" align="center">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        <tr v-for="user in userList">
            <td v-for="(value,key) in user">{{value}}</td>
        </tr>
    </table>

    <!--
    v-if是根据表达式的值来决定是否渲染元素
    v-show是根据表达式的值来切换元素的display css属性
    v-if在条件不满足的时候元素不会存在；v-show条件不满足的时候只是对元素进行隐藏。
    -->
    <span v-if="type==='A'">you are a pig</span>
    <span v-else-if="type==='B'">you are not a pig</span>
    <hr>

    <span v-if="flag">you are a flood</span>
    <span v-else="flag">you are a pig</span>
    <hr>
    <button @click="changFlag">切换显示</button>
    <h3>{{flag ? "you are a flood":"you are a pig"}}</h3>

    <h2>
        你的生日是:
        {{new Date(1529032123201).getFullYear()}}-{{new Date(1529032123201).getMonth()+1}}-{{new Date(1529032123201).getDay()}}
    </h2>
    <h2>
        你的生日是:
        {{new Date().getFullYear()}}-{{new Date().getMonth()+1}}-{{new Date().getDay()}}
    </h2>
    <h2>
        你的生日是:
        <!--这里的birth是computed的birth()方法-->
        {{birth}}
    </h2>

    <h3>watch</h3>
    <input type="text" v-model="message">
    <h4>{{message}}</h4>
    username:<input type="text" v-model="user.username">
    <br>
    address:<input type="text" v-model="user.age">
    <button @click="user.age++">+</button>
    <button @click="user.age--">-</button>
    <br>
    {{user.username}}:{{user.age}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            content: "<h2>you are pig</h2>",
            color1:"red",
            color2:"green",
            id:10,
            url1:"http://www.baidu.com",
            url2:"../img/1.jpg",
            url3:"https://www.baidu.com?id=",
            user:{
                username:'Amy',
                password:'123456',
                age:18,
                address:'广东广州'
            },
            userList:[
                {
                    username:'Amy',
                    age:18,
                    address:'广东广州'
                },
                {
                    username:'Mike',
                    age:15,
                    address:'广东深圳'
                },
                {
                    username:'John',
                    age:20,
                    address:'广东珠海'
                },
            ],
            language:[],
            list:['广东','北京','上海','湖南'],
            flag:true,
            type:'A',
            birthday:1529032123201,
            message:"hello"

        },
        methods:{
            changFlag(){
                this.flag=!this.flag;
            }
        },
        computed:{
            birth(){
                let date=new Date(this.birthday);
                return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay();
            }
        },
        watch:{
            message(newValue,oldValue){
                console.log("新值:"+newValue+"旧值:"+oldValue);
            },
            user: {
                /*开启深度监控,监测对象属性值变化*/
                deep:true,
                handler(obj){
                    console.log("name="+obj.username+"  age="+obj.age)
                }
            }
        }
    });
</script>
</body>
</html>